<template>
	<div v-if="mtloading"></div>
	<div v-else>
		<div class="app-container">
			<div class="w-full flex flex-wrap">
				<div v-if="isData" v-for="item, key in data.survey" class="w-2/6 min-w-[390px] p-2">
					<overview :item="item" @inves="getinves" />
				</div>
				<div v-else class="m-auto text-lg text-[#a3a1a1]">{{$t('public.unData')}}</div>
			</div>
		</div>


		<div class="bg-[#fff] m-5 border-2 border-[#E02222]" v-prmis="'home_getSaleChart'">
			<div class="w-full bg-[#E02222] flex h-10 mb-8 text-[#fafafa] px-2 relative">
				<div class="leading-10">{{ $t('home.salesOverview') }}</div>
				<div class="flex leading-10 absolute right-2">
					<div :class="data.overtype == 'day' ? data.bright : data.dark" @click="month('day')">{{
						$t('public.sun') }}</div>
					<div :class="data.overtype == 'cycle' ? data.bright : data.dark" @click="month('cycle')">{{
						$t('public.week') }}</div>
					<div :class="data.overtype == 'month' ? data.bright : data.dark" @click="month('month')">{{
						$t('public.moon') }}</div>
					<div class="pt-2 pl-4 cursor-pointer" @click="toDetails(1)">
						<SvgIcon name="goto" color="#fff" width="20px" height="20px" />
					</div>
				</div>
			</div>

			<div v-loading="data.mtloading">
				<echartsline ref="echlist" :info="data.echlist" />
			</div>
		</div>


		<div class="m-5 flex flex-nowrap">
			<div class="w-1/2 bg-[#fff] mr-4" v-prmis="'home_getMachine10List'">
				<ranking :list="data.macran" :name="$t('home.rankinglist') + `(${$t('home.public')})`" color="#80C269"
					:type="1" />
			</div>
			<div class="w-1/2 bg-[#fff] ml-4" v-prmis="'home_getGoods10List'">
				<ranking :list="data.godsran" :name="$t('home.hotShop') + `(${$t('home.public')})`" color="#448ACA"
					:type="2" />
			</div>
		</div>


		<!-- 弹窗信息 -->
		<el-dialog v-model="data.dialogate" :title="data.title" width="60%">
			<el-table v-loading="data.detloading" :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full">
				<emptylist v-if="data.dialogtype == 'empty'" />
				<badlist v-if="data.dialogtype == 'bad'" />
				<stocklist v-if="data.dialogtype == 'stockOut'" />
			</el-table>
		</el-dialog>

	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t,locale } = useI18n()
import overview from './common/overview.vue';
import emptylist from './common/emptylist.vue';
import badlist from './common/badlist.vue';
import stocklist from './common/stocklist.vue';
import echartsline from './common/Echarts/line.vue';
import ranking from './common/ranking.vue';
import { getechar } from '@/utils/echartsdata';
import { useRouter } from "vue-router";
import store from '@/store'
import {
	getSaleData,
	getMachineData,
	getChannelData,
	getEmptyChannel,
	getBadList,
	getStockOutList,
	getSaleChart,
	getMachine10List,
	getGoods10List,
	getGift
} from '@/api/home';
const router = useRouter()
let echlist = ref(null);
let isData = ref(true)
/**
 * integ[
	 * {name:名称，value:值，color:字体颜色，btnstatus:是否允许点击，url:跳转地址，key:接口返回的字段名，query:用于跳转后判定筛选条件}
	 * ]
	* */

let data = reactive({
	detloading: false, // 加载弹窗
	mtloading: false, // 加载图表
	dialogate: false, // 弹窗
	title: '', // 弹窗标题
	dialogtype: '', // 弹窗类型
	overtype: 'day', // 销售预览 日周月
	bright: 'px-4 cursor-pointer bg-[#fafafa] text-[#E02222] font-bold', // 选中日周月
	dark: 'px-4 cursor-pointer', // 未选中日周月
	list: [], // 列表信息
	macran: [], // 设备前十排行榜
	godsran: [], // 商品前十排行榜
	survey: {
		machine: {
			title: $t('home.deviceStatus'), // 主标题
			icon: 'shangxiayidong', // 大图标
			bgtop: 'border-[#6FA4FF]', // 颜色
			isPrmis: true,
			integ: [
				{ name: $t('public.total'), value: 0, color: '#595959', btnstatus: true, url: '/machine/info', key: 'total', query: '0' },
				{ name: $t('public.onLine'), value: 0, color: '#80c269', btnstatus: true, url: '/machine/info', key: 'online', query: '1', type:'online' },
				{ name: $t('public.offline'), value: 0, color: '#A14949', btnstatus: true, url: '/machine/info', key: 'offline', query: '2', type:'online' },
				{ name: $t('public.uphold'), value: 0, color: '#CD0A0A', btnstatus: true, url: '/machine/info', key: 'maintain', query: '3', type:'status' },
				{ name: $t('public.loseEfficacy'), value: 0, color: '#C3C3C3', btnstatus: true, url: '/machine/info', key: 'disable', query: '2', type:'status'}
			]
		},
		revenue: {
			title: $t('home.sales'),
			icon: 'renminbi',
			bgtop: 'border-[#FF8135]',
			isPrmis: true,
			integ: [
				{ name: $t('public.toDay'), value: '0.00', color: '#0D638F', btnstatus: true, url: '/order/consume', key: 'today', query: '1' },
				{ name: $t('public.yesterday'), value: '0.00', color: '#0D638F', btnstatus: true, url: '/order/consume', key: 'yesterday', query: '2' },
			]
		},
		volume: {
			title: $t('home.salesVolume'),
			icon: 'tiaoxingtuoff',
			bgtop: 'border-[#9DCC72]',
			isPrmis: true,
			integ: [
				{ name: $t('public.toDay'), value: '0', color: '#0D638F', btnstatus: true, url: '/order/consume', key: 'today', query: '1' },
				{ name: $t('public.yesterday'), value: '0', color: '#0D638F', btnstatus: true, url: '/order/consume', key: 'yesterday', query: '2' },
			]
		},
		Channel: {
			title: $t('home.cargoTank'),
			icon: 'shoumaiji',
			bgtop: 'border-[#FF8394]',
			isPrmis: true,
			integ: [
				{ name: $t('home.slot'), value: '0', color: '#0D638F', btnstatus: true, key: 'empty', query: '1' },
				{ name: 'BAD', value: '0', color: '#0D638F', btnstatus: true, key: 'bad', query: '2' },
				{ name: $t('home.emptyCargo'), value: '0', color: '#0D638F', btnstatus: true, key: 'stockOut', query: '3' },
			]
		},
		discount: {
			title: $t('home.discountAmount'),
			icon: 'renminbi',
			bgtop: 'border-[#D17DCD]',
			isPrmis: true,
			integ: [
				{ name: $t('public.toDay'), value: '0.00', color: '#0D638F', btnstatus: true, url: '/order/consume', key: 'today', query: '1' , type:'discount'},
				{ name: $t('public.yesterday'), value: '0.00', color: '#0D638F', btnstatus: true, url: '/order/consume', key: 'yesterday', query: '2' , type:'discount'},
			]
		},
		giftGiving: {
			title: $t('home.giftGiving'),
			icon: 'renminbi',
			bgtop: 'border-[#f00]',
			isPrmis: true,
			integ: [
				{ name: $t('public.toDay'), value: '0.00', color: '#0D638F', btnstatus: true, url: '/order/goods', key: 'today', query: '1' , type:'gift'},
				{ name: $t('public.yesterday'), value: '0.00', color: '#0D638F', btnstatus: true, url: '/order/goods', key: 'yesterday', query: '2' , type:'gift'},
			]
		},
	},
	echlist: { // 图表数据
		date: [],
		sales: [],
		revenue: []
	},
})
// 获取接口信息
let geturlinfo = () => {
	let arrUrl = []
	store.state.menu.forEach(item => {
		arrUrl.push(item.url)
	});
	let isMachineData = arrUrl.includes('/management/index/getMachineData')
	let isGift = arrUrl.includes('/management/index/getGift')
	let isGoods10 = arrUrl.includes('/management/index/getGoods10List')
	let isMachine10 = arrUrl.includes('/management/index/getMachine10List')
	let isSaleData = arrUrl.includes('/management/index/getSaleData')
	let isChannelData = arrUrl.includes('/management/index/getChannelData')
	let isSaleChart = arrUrl.includes('/management/index/getSaleChart')
	if(!isMachineData&& !isGift && !isSaleData&&!isChannelData&&!isSaleChart){
		isData.value = false
	}
	// 获取设备数据
	if (isMachineData) {
		getMachineData().then(res => {
			if (res.state == 200) {
				let machine = data.survey.machine.integ
				for (let item of machine) {
					item.value = res.data[item.key] || 0
				}
			}
		})
	} else {
		data.survey.machine.isPrmis = false
	}
	if (isSaleData) {
		// 获取昨日/今日数据
		getSaleData().then(res => {
			if (res.state == 200) {
				// 销售额
				let revenue = data.survey.revenue.integ
				for (let item of revenue) {
					item.value = (res.data[item.key].saleMoney * 1).toFixed(2) || '0.00'
				}

				// 销量
				let volume = data.survey.volume.integ
				for (let item of volume) {
					item.value = res.data[item.key].saleQuantity || '0'
				}

				// 优惠金额
				let discount = data.survey.discount.integ
				for (let item of discount) {
					item.value = (res.data[item.key].discountMoney * 1).toFixed(2) || '0.00'
				}

			}
		})
	} else {
		data.survey.volume.isPrmis = false
		data.survey.revenue.isPrmis = false
		data.survey.discount.isPrmis = false
	}
	if (isGift) {
		getGift().then(res => {
			if (res.state == 200) {
				let giftGiving = data.survey.giftGiving.integ
				for (let item of giftGiving) {
					item.value = res.data[item.key] || 0
				}
			}
		})
	} else {
		data.survey.giftGiving.isPrmis = false
	}
	if (isChannelData) {
		// 获取货道数据
		getChannelData().then(res => {
			if (res.state == 200) {
				let Channel = data.survey.Channel.integ
				for (let item of Channel) {
					item.value = res.data[item.key] || 0
				}
			}
		})
	} else {
		data.survey.Channel.isPrmis = false
	}
	if (isSaleChart == true) {
		// 获取图表信息
		getchartinfo(1)
	}

	if (isMachine10 == true) {
		// 获取设备前十排行榜
		getMachine10List().then(res => {
			supplement(res.data, 1)
		}).catch(err => {
			supplement([], 1)
		})
	}

	if (isGoods10 == true) {
		// 获取商品前十排行榜
		let lang = locale.value == 'zh' ? 'zh-cn': locale.value == 'en' ? 'en-us' : locale.value == 'tw' ? 'zh-hk':locale.value
		getGoods10List({lang:lang}).then(res => {
			supplement(res.data, 2)
		}).catch(err => {
			supplement([], 2)
		})
	}
}
let toDetails = (e) => {
	let query = {
		id: e.query
	}
	router.push({ path: '/report/sales', query: query })
}
// 点击回调信息
let getinves = (e) => {
	// 跳转链接
	if (e.url != undefined && e.url != '') {
		let query = {}
		if(e.type == 'online'){
			query.online = e.query
		}
		if(e.type == 'status'){
			query.status = e.query
		}
		if(e.type){
			query.type = e.type
		}
		query.id = e.query
		router.push({ path: e.url, query: query })
		return
	}

	// 获取数据
	data.list = []
	data.dialogate = true
	data.detloading = true
	data.dialogtype = e.key
	switch (e.key) {
		case 'empty':
			data.title = $t('home.slotDetails')
			getchannel()
			break;
		case 'bad':
			data.title = $t('home.BADDetails')
			getbad()
			break;
		case 'stockOut':
			data.title = $t('home.emptyCargoDetails')
			getstock()
			break;
	}

}

// 获取空槽货道列表
let getchannel = () => {
	getEmptyChannel().then(res => {
		data.detloading = false
		if (res.state == 200) {
			data.list = res.data
		}
	})
}

// 获取bad列表信息
let getbad = () => {
	getBadList().then(res => {
		data.detloading = false
		if (res.state == 200) {
			data.list = res.data
		}
	})
}

// 获取空货列表信息
let getstock = () => {
	getStockOutList().then(res => {
		data.detloading = false
		if (res.state == 200) {
			data.list = res.data
		}
	})
}

// 获取图表数据
let getchartinfo = (e) => {
	data.mtloading = true
	getSaleChart({ type: e }).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			arrange(res.data, 2, e)
			return
		}
		arrange('', 2, e)

	}).catch(err => {
		data.mtloading = false
		arrange('', 2, e)
	})
}

// 选择日周月
let month = (e) => {
	data.overtype = e
	if (e == 'day') {
		getchartinfo(1)
	}

	if (e == 'cycle') {
		getchartinfo(2)
	}

	if (e == 'month') {
		getchartinfo(3)
	}
}

// 图表数据整理
let arrange = (e, l, y) => {
	getechar(l, y).then(res => {
		if (e) {
			for (let item of e) {
				for (let key in res.time) {
					if (item.week == res.time[key] || item.month == res.time[key] || item.countDate == res.time[key]) {
						res.value1[key] = item.totalQuantity * 1
						res.value2[key] = item.totalPrice * 1
					}
				}
			}
			if (y == 2) {
				res.time = res.time.slice(-15)
				res.value1 = res.value1.slice(-15)
				res.value2 = res.value2.slice(-15)
			}
		} else {
			res.time = res.time.slice(-7)
			res.value1 = res.value1.slice(-7)
			res.value2 = res.value2.slice(-7)
		}
		data.echlist.date = res.time
		data.echlist.sales = res.value1
		data.echlist.revenue = res.value2
		echlist.value.trigger()
	})
}

// 排行榜补全
let supplement = (e, k) => {
	let num = 10 - e.length;
	let arr = e
	for (let i = 0; i < num; i++) {
		arr.push({ id: '' })
	}

	if (k == 1) {
		// 设备排行榜
		data.macran = arr
	} else {
		// 商品排行榜
		data.godsran = arr
	}
}

geturlinfo()

</script>
